<template>
  <div class="app-container">
    <div class="searchform">
      <!-- 查询条件 -->
      <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
        <el-row :gutter="6">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="productName" label="商品名称">
              <el-input v-model="search.productName" clearable/>
            </el-form-item>
          </el-col>
           <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="channelType" label="渠道来源">
                <r-select v-model="search.channelType" type="1701" clearable/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="createTime" label="创建日期">
              <el-date-picker v-model="search.createTime" value-format="yyyy-MM-dd" type="date"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="effective" label="是否生效">
              <r-select v-model="search.effective" clearable type="1001"/>
            </el-form-item>
          </el-col>
          <div style="text-align:right">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
            </el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
            </el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <div class="table">
      <div class="tableHead">
        <div class="tabletitle">商品维护</div>
        <div class="btnGroup">
          <el-button-group>
            <el-button type="primary" icon="el-icon-plus" @click="addOpen" >新增</el-button>
          </el-button-group>
        </div>
      </div>
      <BaseTable v-loading="loading" ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
        <el-table-column type="index" label="序号" min-width="50"/>
        <el-table-column align="center" label="操作" min-width="150">
          <template slot-scope="scope">
            <el-tooltip class="item" content="编辑" placement="bottom">
              <el-button type="text" style="font-size: 20px;" icon="el-icon-edit-outline" @click="editOpen(scope.row)"/>
            </el-tooltip>
             <el-tooltip v-if="scope.row.effective==10011002" class="item" content="有效" placement="bottom">
              <el-button type="text" style="font-size: 20px;" icon="el-icon-success" @click="effective(scope.row)"/>
            </el-tooltip>
             <el-tooltip v-if="scope.row.effective==10011001" class="item" content="无效" placement="bottom">
              <el-button type="text" style="font-size: 20px;" icon="el-icon-error" @click="effective(scope.row)"/>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" min-width="120" />
        <el-table-column prop="merchantName" label="商家名称" min-width="120" />
        <el-table-column prop="activityNumber" label="活动数量" min-width="110" />
        <el-table-column prop="applyNumber" label="已申请数量" min-width="110" />
        <el-table-column :formatter="filterCode" prop="channelType" label="渠道来源" min-width="110" type="1701"/>
        <el-table-column :formatter="filterCode" prop="effective" label="是否有效" min-width="110" type="1001"/>
        <el-table-column :show-overflow-tooltip="true" prop="jumpLink" label="链接" min-width="155"/>
        <el-table-column :formatter="dateFormat" prop="createTime" label="创建日期" min-width="150" sortable/>
      </BaseTable>
    </div>

    <el-dialog v-dialogDrag v-if="MsgDialog" :visible.sync="MsgDialog" :close-on-click-modal="false" title="活动信息" width="80%" append-to-body @close="back">
      <div class="searchform">
        <el-form
          ref="editForm"
          :inline="true"
          :model="activityMsg"
          :rules="rules"
          size="mini"
          label-width="95px">
          <el-form-item prop="productName" label="商品名称">
            <el-input v-model="activityMsg.productName" class="search-input" clearable/>
          </el-form-item>
          <el-form-item prop="merchantName" label="商家名称">
            <el-input v-model="activityMsg.merchantName" class="search-input" clearable/>
          </el-form-item>
          <el-form-item prop="channelType" label="渠道来源">
            <r-select v-model="activityMsg.channelType" :formatter="filterCode" class="search-input" type="1701" clearable/>
          </el-form-item>
          <el-form-item prop="jumpLink" label="链接">
            <el-input v-model="activityMsg.jumpLink" class="search-input" clearable/>
          </el-form-item>
          <el-form-item prop="price" label="原价(元)" >
            <el-input v-model="activityMsg.price" placeholder="请输入价格" clearable />
          </el-form-item>
          <el-form-item prop="actualPrice" label="到手价(元)" >
            <el-input v-model="activityMsg.actualPrice" placeholder="请输入价格" clearable />
          </el-form-item>
          <el-form-item prop="activityNumber" label="活动数量" >
            <el-input v-model="activityMsg.activityNumber" placeholder="请输入活动数量" clearable />
          </el-form-item>

          <br>
          <el-form-item prop="indexFile" label="商品图片">
            <ImgItemSingle :fileList.sync="indexFile"/>
          </el-form-item>
          <br><br><br><br>
          <div style="text-align:center">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="back">返回</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { queryActivity, addActivity, editActivity, effective } from '@/api/commodity/activityManage/activityMaintenance.js'
import BaseTable from '@/components/BaseTable'
import filtercode from '@/components/Checkbox/filtercode'
import rSelect from '@/components/Select/Select'
import ImgItemSingle from '@/components/uploads/ImgItemSingle.vue'
import ImgvideoItem from '@/components/uploads/ImgvideoItem.vue'
import formMixins from '@/mixins/formMixins'
import {posInteger, moneyMinus} from '@/utils/validator'
import moment from 'moment'
import _ from 'lodash'

export default {
  name: 'ActivityMaintenance',
  components: {
    BaseTable,
    rSelect,
    filtercode,
    ImgItemSingle,
    ImgvideoItem
  },
  mixins: [formMixins],
  data() {
    return {
      activityID: '',
      way: '',
      indexFile: [],
      rules: {
        productName: [{ trigger: 'blur', required: true, message: '商品名称不能为空' }],
        merchantName: [{ trigger: 'blur', required: true, message: '商家名称不能为空' }],
        channelType: [{ trigger: 'blur', required: true, message: '渠道类型不能为空' }],
        jumpLink: [{ trigger: 'blur', required: true, message: '链接不能为空' }],
        activityNumber: [{ trigger: 'blur', required: true, validator: posInteger }],
        price: [{
          required: true,
          validator: moneyMinus,
          trigger: 'blur'
        }],
        actualPrice: [{
          required: true,
          validator: moneyMinus,
          trigger: 'blur'
        }],
        indexFile: [{ trigger: 'blur', required: true, message: '图片必填' }]
      },
      // 搜索栏
      search: {
        limit: 10,
        pageNum: 1,
        productName: '',
        channelType: '',
        createTime: '',
        effective: ''
      },
      // 新增/编辑页面
      activityMsg: {
        productName: '',
        merchantName: '',
        channelType: '',
        jumpLink: '',
        price: 0.00,
        actualPrice: 0.00,
        activityNumber: null,
        indexFile: []
      },
      dialogVisible: false,
      MsgDialog: false,
      loading: false,
      modelIsNull: true
    }
  },
  computed: {
  },
  watch: {
    'way': function(val) {
      if (val == 'edit') {
        this.modelIsNull = false
      } else if (val == 'add') {
        this.modelIsNull = true
      }
    }
  },
  mounted() {
    this.searchHandle()
  },
  methods: {
    // 查询活动信息
    searchHandle() {
      this.loading = true
      const table = this.$refs['table']
      queryActivity(this.search)
        .then(res => {
          table.complete().filData(res.data)
          this.loading = false
        })
        .catch(err => {
          table.complete()
        })
        this.loading = false
    },

    // 前往新增
    addOpen() {
      this.way = 'add'
      this.MsgDialog = true
    },

    // 前往编辑
    editOpen(data) {
        this.indexFile =  Object.assign([], data.files)
      // 给编辑页面传入参数
        this.activityMsg.productName = data.productName,
        this.activityMsg.merchantName = data.merchantName,
        this.activityMsg.channelType = data.channelType,
        this.activityMsg.jumpLink = data.jumpLink,
        this.activityMsg.price = data.price,
        this.activityMsg.actualPrice = data.actualPrice,
        this.activityMsg.activityNumber = data.activityNumber,
        this.activityID = data.id
        this.way = 'edit'
        this.MsgDialog = true
    },

    effective(data) {
        effective({}, data.id)
              .then(() => {
                this.$message({
                  type: 'success',
                  message: '更改成功!'
                })
                this.back()
                this.searchHandle()
              })
              .catch(err => {
              })
    },

    // 保存
    save() {
      this.activityMsg.indexFile = this.indexFile
      const args = Object.assign({}, this.activityMsg)
      console.log(this.activityMsg)
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          if (this.way == 'add') {
            addActivity(args).then(res => {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.back()
              this.searchHandle()
            }).catch(err => {
            })
          } else if (this.way == 'edit') {
            editActivity(args, this.activityID)
              .then(() => {
                this.$message({
                  type: 'success',
                  message: '活动信息保存成功!'
                })
                this.back()
                this.searchHandle()
              })
              .catch(err => {
              })
          }
        }
      })
    },

    // 返回查询页面
    back() {
        this.activityMsg.productName = '',
        this.activityMsg.merchantName = '',
        this.activityMsg.channelType = '',
        this.activityMsg.jumpLink = '',
        this.activityMsg.indexFile = [],
        this.activityMsg.price = 0.00,
        this.activityMsg.actualPrice = 0.00,
        this.activityMsg.activityNumber = null,
        this.MsgDialog = false
    },

    // 日期格式化
    dateFormat: function(row, column) {
      var date = row[column.property]
      if (date) {
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      } else {
        return ''
      }
    },

    forceUpdate() {
      this.$forceUpdate()
    }

  }
}
</script>

<style scoped>
.sizeTip{
  font-style: normal;
    margin-bottom: 8px;
    font-size: 13px;
    color: rgb(255, 0, 13);
    height: 12px;

  }
</style>
